<template>
  <div class="event_detail">
    <Banner></Banner>
    <mainContent catname="走访详情">
      <div slot="menu_list">
        <dl>
          <dt class="menu_dt" :style="{backgroundImage: 'url(' + this.$util.storage.get('menu_bg') + ')'}">走访详情</dt>
        </dl>
      </div>
      <div slot="inner_content" style="box-sizing: border-box;">
        <div class="detail_region">
          <!--轨迹地图-->
          <div class="detail">
                 <div class="detail_box">
                     <div class="row">
                          <div class="row_left"><span>走访标题：</span></div>
                          <div class="row_right"><span style="padding-left: 10px;">{{data.title}}</span></div>
                       </div>

                     <div class="row">
                       <div class="row_left"><span>走访人：</span></div>
                       <div class="row_right"><span style="padding-left: 10px;">{{data.visit_user}}</span></div>
                     </div>

                     <div class="row">
                       <div class="row_left"><span>走访对象：</span></div>
                       <div class="row_right"><span style="padding-left: 10px;">{{data.interview_text}}</span></div>
                     </div>

                     <div class="row_type">
                       <div class="row_type_left">
                           <div class="title_name"><span>走访时间：</span></div>
                           <div class="data"><span style="padding-left: 10px;">{{data.time}}</span></div>
                           <!--<div class="data"><span style="padding-left: 10px;"  v-if="data.cat_id==2">纠纷排查</span></div>-->
                           <!--<div class="data"><span style="padding-left: 10px;"  v-if="data.cat_id==3">本地受理</span></div>-->
                       </div>
                       <div class="row_type_right">
                         <div class="title_name"><span>走访人数：</span></div>
                         <div class="data">
                           <span style="padding-left: 10px;">{{data.interview_count}}</span>
                         </div>
                       </div>
                     </div>

                     <div class="row_content">
                       <div class="content_left"><span style="padding-bottom: 76px;">走访内容：</span></div>
                       <div class="content_rights">{{data.content}}</div>
                     </div>

                     <div v-if="data.imgs.length" class="row_content">
                       <div class="content_left"><span style="padding-bottom: 76px;">走访图片：</span></div>
                       <div class="content_rights">
                         <div class="img_boxs">
                              <img @click="prviewImg(data.imgs,index)" v-for="(item,index) in data.imgs" :src="item"/>
                         </div>
                       </div>
                     </div>
                 </div>
          </div>
          <!--轨迹地图-->

        </div>
      </div>
    </mainContent>
    <MainMenu>
    </MainMenu>
    <footerBar></footerBar>
  </div>
</template>

<script>

  import Banner from '../../../components/bannder/Banner'
  import mainContent from '../../../components/content/mainContent'
  import MainMenu from '../../../components/mainmenu/MainMenu'
  import footerBar from '../../../components/content/footerBar'
  import { ImagePreview } from 'vant';//引入vant预览的组件
  export default {
    name: "EventDetail",
    components:{
      Banner,
      mainContent,
      MainMenu,
      footerBar,
      [ImagePreview.Component.name]: ImagePreview.Component,//局部引入vant的图片预览组件
    },
    data(){
      return{
        id: this.$route.query.id,
        data: {},
        images: [],
        preday:'',
        currentItem: {}
      }
    },
    created(){},

    mounted() {
      this.getData();
    },

    methods:{
      prviewImg(images,index){
        console.log('您点击了预览图片！',images,index);
        ImagePreview({
          images: images,
          startPosition: index,
        });
      },

      getData() {
        let that = this;
        that.$http.get("/api/GriderPcApi/visitDetail?id="+that.id, null, r=>{
          console.log('走访详情为',r)
          that.data = r.data;
        });
      }
    },
  }
</script>

<style scoped>
  .detail_region{
    height: 740px;
    width: 100%;
    box-sizing: border-box;
    padding-top: 55px;
    padding-left: 35px;
    padding-right: 35px;
    padding-bottom: 30px;
  }
  .detail{
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .detail_box{
    width: 1175px;
    border-radius: 16px;
    overflow: hidden;
  }
  .row{
    height: 70px;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    display: flex;
    margin-bottom: 10px;
  }
  .row_type{
    height: 70px;
    display: flex;
    margin-bottom: 10px;
  }
  .row_type_left{
    flex: 1;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    display: flex;
  }
  .title_name{
    font-size: 22px;
    color: #666666;
    width: 126px;
    display: flex;
    align-items: center;
  }
  .data{
    background: #f3f3f3;
    flex: 2.8;
    color: black;
    font-weight: bold;
    font-size: 22px;
    border-radius: 8px;
    display: flex;
    align-items: center;
  }

  .row_type_right{
    flex: 1;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    display: flex;
  }


  .row_left{
    flex: 1;
    font-size: 22px;
    color: #666666;
    display: flex;
    align-items: center;
  }
  .row_right{
    flex: 8;
    background: #f3f3f3;
    border-radius: 8px;
    color: black;
    font-weight: bold;
    font-size: 22px;
    display: flex;
    align-items: center;
  }

  .row_content{
    height: 140px;
    display: flex;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
  }

  .content_left{
    flex: 1;
    font-size: 22px;
    color: #666666;
    display: flex;
    align-items: center;
  }
  .content_rights{
    flex: 8;
    background: #f3f3f3;
    border-radius: 8px;
    color: black;
    font-weight: bold;
    font-size: 22px;
    box-sizing: border-box;
    padding: 10px;
  }
  .img_boxs{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
  }
  .img_boxs img{
    height: 80px;
    width: 120px;
    margin-right: 10px;
  }









</style>
